<template>
    <div class="background p_r">
        <!-- <div class="d_f weather a_i_c">
            <img src="../../../assets/weather1.png" alt="" class="sun">
            <span>24—32 ℃</span>
            <span class="m_l_10">多云 西北风3级</span>
        </div> -->
        <div class="title">{{simpleName}}可视化大屏</div>
        <div class="d_f a_i_c timer">
            <div class="time m_l_10">{{ time }}</div>
            <div class="day m_l_5">{{ day }}</div>
            <div class="day m_l_5">{{ week }}</div>
            <img src="../../../assets/close1.png" alt="" class="close m_l_20 c_p" @click="exit">
        </div>
        <div class="flex d_f j_c_s_b">
            <div class="left">
                <div class="box" style="height: 23%;">
                    <div class="d_f j_c_s_b">
                        <div class="d_f a_i_c">
                            <img src="../../../assets/mark.png" alt="" class="mark">
                            <span class="size">担保情况汇总</span>
                        </div>
                        <!-- <div class="english">danbaoqingkuanghuizong</div> -->
                    </div>
                    <img src="../../../assets/line.png" alt="" class="line">
                    <div class="d_f a_i_c top">
                        <img src="../../../assets/count.png" alt="" class="count">
                        <div class="margin">
                            <div class="num">{{ totalInfo.totalNum }}</div>
                            <div class="tips">总业务笔数</div>
                        </div>
                        <img src="../../../assets/money.png" alt="" class="money margin">
                        <div class="margin">
                            <div class="num">{{ totalInfo.totalApplyAmount }}</div>
                            <div class="tips">总申请金额(万元)</div>
                        </div>
                    </div>
                </div>
                <div class="box" style="height: 36%; margin-top: 2.5%;">
                    <div class="d_f j_c_s_b">
                        <div class="d_f a_i_c">
                            <img src="../../../assets/mark.png" alt="" class="mark">
                            <span class="size">各产品担保情况</span>
                        </div>
                        <!-- <div class="english">danbaoqingkuang</div> -->
                    </div>
                    <img src="../../../assets/line.png" alt="" class="line">
                    <div id="securityEcharts"></div>
                </div>
                <div class="box" style="height: 36%;margin-top: 2.5%;">
                    <div class="d_f j_c_s_b a_i_c">
                        <div class="d_f a_i_c">
                            <img src="../../../assets/mark.png" alt="" class="mark">
                            <span class="size">融资机构申请担保金额情况</span>
                        </div>
                        <!-- <div class="english">danbaoqingkuang</div> -->
                    </div>
                    <img src="../../../assets/line.png" alt="" class="line">
                    <div id="columnarEcharts"></div>
                </div>
            </div>
            <div class="center p_r">
                <div v-for="(item, index) in records" :key="index" class="d_f f_d_c a_i_c p_a"
                    :style="{ top: item.top, left: item.left }">
                    <img src="../../../assets/loan.png" alt="" class="loan">
                    <div class="loan_size">{{ item.name }}</div>
                </div>
            </div>
            <div class="right">
                <div class="box p_r" style="height: 27%;">
                    <div class="d_f j_c_s_b">
                        <div class="d_f a_i_c">
                            <img src="../../../assets/mark.png" alt="" class="mark">
                            <span class="size">本机构学历统计</span>
                        </div>
                        <!-- <div class="english">xuelitongji</div> -->
                    </div>
                    <img src="../../../assets/line.png" alt="" class="line">
                    <div id="educationEcharts"></div>
                    <div class="round_setting"></div>
                </div>
                <div class="box" style="height: 33%; margin-top: 2.5%;">
                    <div class="d_f j_c_s_b">
                        <div class="d_f a_i_c">
                            <img src="../../../assets/mark.png" alt="" class="mark">
                            <span class="size">TOP5 担保产品</span>
                        </div>
                        <!-- <div class="english">TOP5danbaochanping</div> -->
                    </div>
                    <img src="../../../assets/line.png" alt="" class="line">
                    <div v-for="(item, index) in product" :key="index">
                        <div class="name">{{ item.productName }}</div>
                        <div class="d_f a_i_c j_c_s_b">
                            <div class="back d_f a_i_c p_r">
                                <div class="fill"></div>
                                <div class="sign" :style="{ width: item.rate+'%' }"></div>
                                <img src="../../../assets/sign1.png" :style="{ left: item.rate-2+'%' }" alt="" v-if="index == 0&&item.num>0"
                                    class="sign_icon">
                                <img src="../../../assets/sign2.png" :style="{ left: item.rate-2+'%' }" alt="" v-if="index != 0&&item.num>0"
                                    class="sign_icon">
                            </div>
                            <div class="num">{{ item.num }}</div>
                        </div>
                    </div>
                </div>
                <div class="box" style="height: 35%;margin-top: 2.5%;">
                    <div class="d_f j_c_s_b">
                        <div class="d_f a_i_c">
                            <img src="../../../assets/mark.png" alt="" class="mark">
                            <span class="size">合作机构排名</span>
                        </div>
                        <!-- <div class="english">xuelitongji</div> -->
                    </div>
                    <img src="../../../assets/line.png" alt="" class="line">
                    <div class="head d_f a_i_c">
                        <div style="width: 7%;text-align: center;"></div>
                        <div style="width: 23%;text-align: center;">机构名称</div>
                        <div style="width: 30%;text-align: center;">地区</div>
                        <div style="width: 20%;text-align: center;">总额度</div>
                        <div style="width: 18%;text-align: center;">合作业务</div>
                    </div>
                    <div class="auto">
                        <template v-for="(item, index) in ranking" :key="index">
                            <div class="d_f a_i_c m_t_10">
                                <div class="one d_f j_c_c a_i_c" v-if="index == 0">{{ index + 1 }}</div>
                                <div class="two d_f j_c_c a_i_c" v-if="index == 1">{{ index + 1 }}</div>
                                <div class="three d_f j_c_c a_i_c" v-if="index == 2">{{ index + 1 }}</div>
                                <div class="other d_f j_c_c a_i_c" v-if="index > 2">{{ index + 1 }}</div>
                                <el-tooltip :content="item.agencyName" effect="customized">
                                <div class="name1 ellipsis">{{ item.agencyName }}</div>
                            </el-tooltip>
                            <el-tooltip :content="item.area" effect="customized">
                                <div class="address ellipsis">{{ item.area }}</div>
                            </el-tooltip>
                            <el-tooltip :content="String(item.totalAmount) || '0'" effect="customized">
                                <div class="limit">{{ item.totalAmount || '0' }}</div>
                            </el-tooltip>
                            <el-tooltip :content="item.productName || '0'" effect="customized">
                                <div class="d_f j_c_c productName" style="width: 16%;">
                                    {{ item.productName }}
                                </div>
                            </el-tooltip>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { screenType } from '../../../type/report'
import { defineComponent, reactive, toRefs, onBeforeMount, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router';
import * as echarts from 'echarts';
import moment from 'moment'
import { screenTotalBiz, productAmount, amountByMonth, academicStat,productBizCount,agencyStat,statisticalCompanyInfo} from '../../../api/report'
export default defineComponent({
    name: '',
    setup() {
        const data: screenType = reactive({
            totalInfo: {
                customerNum: 0,
                totalApplyAmount: 0,
                totalNum: 0
            },
            day: '',
            week: '',
            time: '',
            timer: null,
            obj: {
                1: '星期一',
                2: '星期二',
                3: '星期三',
                4: '星期四',
                5: '星期五',
                6: '星期六',
                7: '星期天',
            },
            product: [],
            ranking: [],
            records: [
                {
                    name: '二连浩特个人助业E备项目',
                    top: '39%',
                    left: '11%'
                },
                {
                    name: '网商保',
                    top: '20%',
                    left: '12%'
                },
                {
                    name: '乡村振兴保',
                    top: '18%',
                    left: '46%'
                },
                {
                    name: '青锋保',
                    top: '30%',
                    left: '66%'
                },
                {
                    name: '知产保',
                    top: '15%',
                    left: '77%'
                },
                {
                    name: '政采保',
                    top: '50%',
                    left: '85%'
                },
            ],
            columnarChart:null,
            securityChart:null,
            educationChart:null,
            simpleName:'',
        })
        const router = useRouter()
        onBeforeMount(() => {
            methods.toggleFullScreen()
            data.day = moment(new Date()).format('YYYY-MM-DD')
            for (let i in data.obj) {
                if (moment().format('d') == i) {
                    data.week = data.obj[i]
                }
            }
            data.time = moment(new Date()).format('HH:mm:ss')
            data.timer = setInterval(() => {
                data.time = moment(new Date()).format('HH:mm:ss')
            }, 1000)
        })
        onMounted(() => {
            statisticalCompanyInfo({ id: '' }).then((res:any) => {
                if (!res) return
                data.simpleName= res.simpleName
            })
            methods.getData()
        })
        onUnmounted(() => {
            clearInterval(data.timer)
            data.columnarChart.dispose()
            data.securityChart.dispose()
            data.educationChart.dispose()
            data.timer=data.columnarChart=data.securityChart=data.educationChart = null
        });
        const methods = {
            toggleFullScreen() {
                document.documentElement.requestFullscreen()
            },
            togexitFullscreen(){
                document.exitFullscreen()
            },
            getData() {
                screenTotalBiz({}).then((res: any) => {
                    data.totalInfo = res
                    data.totalInfo.totalApplyAmount = (res.totalApplyAmount / 10000).toFixed(2)
                })
                productAmount({}).then((res: any) => {
                    methods.securityCharts(res)
                })
                amountByMonth({}).then((res: any) => {
                    methods.columnarCharts(res)
                })
                academicStat({}).then((res: any) => {
                   methods.educationCharts(res)
                })
                productBizCount({}).then((res:any)=>{
                    data.product = res.slice(0, 5)
                    let total = 0
                    data.product.map((item: any) => {
                        total += item.num
                    })
                    data.product.map((item: any) => {
                        item.rate = ((item.num / total) * 100).toFixed(2)
                    })
                    data.records.map((item:any,index:number)=>{
                   item.name=res[index].productName
                    })
                })
                agencyStat({}).then((res:any)=>{
                    res.map((item: any) => {
                        if (item.agencyArea) {
                            let area = JSON.parse(item.agencyArea)
                            area = area.sort((a, b) => b.length - a.length)
                            let name = ''
                            area.map(item => {
                                if (name) {
                                    name = name + ',' + item.join('/')
                                } else {
                                    name = item.join('/')
                                }
                            })

                            item.area = name
                        }
                    })
                    data.ranking = res
                })
            },
            getArr(name: string, list: any) {
                let arr = []
                list.map((item: any) => {
                    item.innerProductList.map((item1: any) => {
                        if (name == item1.productName) {
                            let guaMoney = '0'
                            if (item1.guaMoney > 0) {
                                guaMoney = (item1.guaMoney / 10000).toFixed(2)
                            }
                            arr.push(guaMoney)
                        }
                    })
                })
                return arr
            },
            getRandomGradient() {
                return `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`
            },
            //各产品担保情况
            securityCharts(res: any) {
                const securityChart = echarts.init(document.getElementById('securityEcharts'));
                let xAxis = res.map((item: any) => {
                    return item.month
                })
                let series = []

                let list = res[0].innerProductList

                res.map((item: any) => {
                    list.map((item1: any) => {
                        if (!item.innerProductList.some((item2: any) => item2.productName == item1.productName)) {
                            item.innerProductList.push({ guaMoney: 0, productName: item1.productName })
                        }
                    })
                })
                let maxScore = res.reduce((prev, curr) => {
                    return prev > curr.innerProductList.length ? prev : curr.innerProductList.length
                })
                res.map((item: any) => {
                    if (item.innerProductList.length == maxScore) {
                        list = item.innerProductList

                    }
                })
                let legend = list.map((item: any) => {
                    return item.productName
                })
                res.map((item: any) => {
                    list.map((item1: any) => {
                        if (!item.innerProductList.some((item2: any) => item2.productName == item1.productName)) {
                            item.innerProductList.push({ guaMoney: 0, productName: item1.productName })
                        }
                    })
                })
                list.map((item: any) => {
                    series.push({
                        name: item.productName,
                        data: methods.getArr(item.productName, res),
                        type: 'line',
                        smooth: true,
                        // lineStyle: {
                        //     color: '#31FBFB' // 修改曲线颜色为红色
                        // },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.5,
                            // color:methods.getRandomGradient()
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: methods.getRandomGradient()
                                },
                                {
                                    offset: 1,
                                    color: methods.getRandomGradient()
                                }
                            ])
                        },
                    })
                })
                securityChart.setOption({

                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                    xAxis: {
                        type: 'category',
                        // boundaryGap: false,
                        data: xAxis,
                        axisLabel: {
                            color: 'rgba(56, 78, 97, 0.8)',// x轴字体颜色
                            interval: 0//轴显示所有的数据
                        },
                        axisLine: {
                            lineStyle: {
                                show: false,//是否显示坐标轴轴线，
                                color: '',//x轴轴线的颜色
                                width: 1,//x轴粗细
                            }
                        },
                        splitLine: { show: false },
                    },
                    dataZoom: {
                        xAxisIndex: 0, //这里是从X轴的0刻度开始
                        show: true, //是否显示滑动条，不影响使用
                        type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        startValue: 0, // 从头开始。
                        endValue: 8, // 一次性展示几个。
                    },
                    legend: {
                        data: legend,
                        bottom: '0',
                        icon: 'circle',
                        textStyle: {
                            color: '#fff',
                            fontSize: 12
                        },
                        show: false,
                    },
                    yAxis: {
                        type: 'value',
                        name: '万元', // 设置Y轴标题
                        offset: 0,
                        axisLabel: {
                            color: 'rgba(56, 78, 97, 0.8)',// x轴字体颜色
                            interval: 0//轴显示所有的数据
                        },
                        axisLine: {

                        },
                        splitLine: {
                            show: true, lineStyle: {
                                type: 'dashed',
                                color: 'rgba(56, 78, 97, 0.2)'
                            }
                        }  // 不展示横向的网格线
                    },
                    grid: {
                        left: '0%',
                        right: "0%",
                        bottom: "10%",
                        top: '20%',
                        containLabel: true,
                    },
                    series: series
                    // [
                    //     {
                    //         name: '金额情况',
                    //         data: data,
                    //         type: 'line',
                    //         smooth: true,

                    //         showSymbol: false,
                    //         itemStyle: { // 设置标记的样式
                    //             normal: {
                    //                 color: 'rgba(75, 171, 255, 1)', // 标记点颜色
                    //                 // borderColor: 'blue', // 标记边框颜色
                    //                 borderWidth: 1 // 标记边框宽度
                    //             }
                    //         },
                    //         areaStyle: {
                    //             opacity: 0.3,
                    //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //                 {
                    //                     offset: 0,
                    //                     color: 'rgba(75, 171, 255, 1)' // 起始颜色
                    //                 },
                    //                 {
                    //                     offset: 1,
                    //                     color: 'rgba(75, 171, 255, 0.1)', // 结束颜色
                    //                 },
                    //             ])
                    //         },
                    //     }
                    // ],
                })
                data.securityChart=securityChart
            },
            //融资机构申请担保金额情况
            columnarCharts(res: any) {
                const columnarChart = echarts.init(document.getElementById('columnarEcharts'));
                let xaxis = res.map((item: any) => {
                    return item.date
                })
                let series = res.map((item: any) => {
                    return (item.guaMoney / 10000).toFixed(2)
                })
              columnarChart.setOption({

                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                    xAxis: {
                        type: 'category',
                        // boundaryGap: false,
                        data: xaxis,
                        axisLabel: {
                            color: 'rgba(56, 78, 97, 0.8)',// x轴字体颜色
                            interval: 0//轴显示所有的数据
                        },
                        axisLine: {
                            lineStyle: {
                                show: false,//是否显示坐标轴轴线，
                                color: '',//x轴轴线的颜色
                                width: 1,//x轴粗细
                            }
                        },
                        splitLine: { show: false },
                    },
                    dataZoom: {
                        xAxisIndex: 0, //这里是从X轴的0刻度开始
                        show: true, //是否显示滑动条，不影响使用
                        type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        startValue: 0, // 从头开始。
                        endValue: 8, // 一次性展示几个。
                    },
                    legend: {
                        show: false,
                        data: [{
                            name: '金额情况',
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(75, 171, 255, 1)' // 起始颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(75, 171, 255, 0.4)', // 结束颜色
                                    },
                                ])
                            },
                        }],
                        bottom: '-5',
                        textStyle: {
                            color: 'rgba(56, 78, 97, 0.8)',
                            fontSize: 12
                        },
                        icon: 'rect'
                    },
                    yAxis: {
                        type: 'value',
                        name: '万元', // 设置Y轴标题
                        offset: 0,
                        axisLabel: {
                            color: 'rgba(56, 78, 97, 0.8)',// x轴字体颜色
                            interval: 0//轴显示所有的数据
                        },
                        axisLine: {

                        },
                        splitLine: {
                            show: true, lineStyle: {
                                type: 'dashed',
                                color: 'rgba(56, 78, 97, 0.2)'
                            }
                        }  // 不展示横向的网格线
                    },
                    grid: {
                        left: '0%',
                        right: "0%",
                        bottom: "10%",
                        top: '20%',
                        containLabel: true,
                    },
                    series: [
                        {
                            name: '金额情况',
                            type: 'bar',
                            barWidth: '20',
                            barGap: 2, //柱子之间间距
                            data: series,
                            itemStyle: {
                                borderRadius: [0, 0, 0, 0],
                                // 为每个柱子设置颜色
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(75, 171, 255, 1)' // 起始颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(75, 171, 255, 0.4)', // 结束颜色
                                    },
                                ])
                            }
                        }
                    ],
                })
                data.columnarChart=columnarChart
            },
            //本机构学历统计
            educationCharts(res:any) {
              const educationChart = echarts.init(document.getElementById('educationEcharts'));
                let series = []
                res.map(item => {
                    series.push({ value: item.percent, name: item.academic + ' ' + item.percent + '%' })
                })
            educationChart.setOption({
                tooltip: {
                    trigger: 'item'
                    // formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    right: '10%',
                    top: 'center',
                    show: true,
                    orient: 'vertical',
                    itemWidth: 8, // 图形宽度
                    itemHeight: 8, // 图形高度
                },
                color: ['#FFC963', '#3E8EC8', '#0095FF'],
                series: [
                    {
                        name: '学历统计',

                        type: 'pie',
                        radius: ['40%', '80%'],
                        center: ['20%', '50%'],
                        roseType: 'radius',

                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        },
                        data: series
                    },

                ]
            })
            data.educationChart=educationChart
            },
            exit(){
                methods.togexitFullscreen()
                router.go(-1)
            }
        }
        return {
            ...toRefs(data),
           ...methods
        }
    }
})
</script>
<style scoped lang='scss'>
.background {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-image: url('../../../assets/undertint.png');

    .weather {
        color: #384D61;
        font-size: 16px;
        position: absolute;
        top: 10px;
        left: 2.08vw;

        .sun {
            width: 1.25vw;
            margin: 0px 10px;
        }
    }

    .title {
        background: linear-gradient(2deg, #FFFFFF 30%, #FFFFFF 63%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        font-family: 'typeface';
        font-size: 1.8vw;
        position: absolute;
        top: 10px;
        text-align: center;
        width: 100%;
    }

    .timer {
        position: absolute;
        top: 10px;
        right: 2.08vw;

        .day {
            color: #384D61;
            font-size: 0.83vw;
        }

        .time {
            color: #384D61;
            font-size: 1.21vw;
            font-weight: 700;
        }

        .close {
            width: 1.25vw;
        }
    }

    .flex {
        width: calc(100% - 2.8vw);
        height: calc(100% - 10vh);
        margin-left: 1.4vw;
        padding-top: 7vh;
    }

    .left {
        width: 25%;
        height: 100%;

        .count {
            width: 4.375vw;
        }

        .money {
            width: 4.375vw;
        }

        .num {
            color: #007CE9;
            font-size: 1.35vw;
        }

        .tips {
            color: #415B73;
            font-size: 0.72vw;
        }

        .margin {
            margin-left: 0.83vw;
        }

        .top {
            margin-top: 2vh;
        }

    }

    .center {
        width: calc(50% - 80px);
        height: 100%;

        .loan {
            width: 5.625vw;
        }

        .loan_size {
            color: #415B73;
            font-size: 0.83vw;
            // width: 5.625vw;
            word-wrap: break-word;
            /* 允许在单词内换行 */
            overflow-wrap: break-word;
            /* 同上，现代浏览器推荐使用这个属性别名 */
            white-space: normal;
            /* 允许自动换行 */
            text-align: center;
        }
    }

    .right {
        width: 25%;
        height: 100%;

        .name {
            color: #384E61;
            font-size: 0.729vw;
        }

        .back {
            width: 70%;
            background: rgba(56, 78, 97, 0.1);
            height: 4px;
            border-radius: 2px;
        }

        .sign {
            height: 100%;
            background: linear-gradient(to left, #4BABFF -2%, rgba(75, 171, 255, 0) 100%);
            border-radius: 2px;
        }

        .num {
            color: #384E61;
            font-size: 0.729vw;
            font-weight: 700
        }

        .sign_icon {
            width: 16px;
            height: 16px;
            position: absolute;

        }

        .head {
            background: #4AA6FC;
            width: 100%;
            height: 2.08vw;
            color: rgba(255, 255, 255, 0.75);
            font-size: 0.833vw;
            margin-top: 1vh;
        }

        .one {
            box-sizing: border-box;
            border: 1px solid #349DFF;
            background: rgba(52, 157, 255, 0.5);
            width: 6%;
            height: 100%;
            color: #FFFFFF;
            font-size: 0.83vw;
        }

        .two {
            box-sizing: border-box;
            border: 1px solid #0084FF;
            background: rgba(0, 129, 250, 0.5);
            width: 6%;
            height: 100%;
            color: #FFFFFF;
            font-size: 0.83vw;
        }

        .three {
            box-sizing: border-box;
            border: 1px solid #349DFF;
            background: rgba(52, 157, 255, 0.5);
            width: 6%;
            height: 100%;
            color: #FFFFFF;
            font-size: 0.83vw;
        }

        .other {
            border: 1px solid #005BAF;
            box-sizing: border-box;
            background: rgba(0, 129, 250, 0.1);
            width: 6%;
            height: 100%;
            color: #0084FF;
            font-size: 0.83vw;
        }

        .ellipsis {
            white-space: nowrap; //不换行
            overflow: hidden; //超出部分隐藏
            text-overflow: ellipsis; //文本溢出显示省略号
            font-size: 12px;
            color: #4AA6FC;
            text-align: center;
        }

        .name1 {
            width: calc(25% - 5px);
            margin-left: 5px;
        }

        .address {
            width: calc(30% - 5px);
            margin-left: 5px;
        }

        .limit {
            color: #60B2FF;
            font-size: 0.83vw;
            font-weight: bold;
            width: calc(20% - 5px);
            text-align: center;
            white-space: nowrap; //不换行
            overflow: hidden; //超出部分隐藏
            text-overflow: ellipsis; //文本溢出显示省略号
        }

        .good {
            width: 1.45vw;
            height: 1.45vw;
        }
    }

    .box {
        width: 100%;
        box-sizing: border-box;
        border: 2px solid #FFFFFF;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.56) 0%, rgba(222, 239, 255, 0.56) 153%);
        border-radius: 9px;
        padding: 12px 22.5px;

        .mark {
            width: 20px;
            height: 20px;
        }

        .size {
            color: #415B73;
            font-weight: 700;
            margin-left: 5px;
            font-size: 0.83vw;
        }

        .english {
            color: #7395B3;
            font-size: 12px;
            margin-top: 5px;
        }

        .line {
            width: 100%;
        }

        #securityEcharts {
            width: 100%;
            height: calc(100% - 2vw);
        }

        #columnarEcharts {
            width: 100%;
            height: calc(100% - 2vw);
        }

        #educationEcharts {
            width: 100%;
            height: calc(100% - 2vw);
        }

        .round_setting {
            // position: absolute;
            // background: rgba(56, 80, 97, 0.04);
            // width: 7.3vw;
            // height: 7.3vw;
            // border-radius: 50%;
            // top: 2.8vw;
            // left: 2vw;
        }
    }
    .auto {
            height: 60%;
            overflow: auto;
        }
    .productName {
            white-space: nowrap; //不换行
            overflow: hidden; //超出部分隐藏
            text-overflow: ellipsis; //文本溢出显示省略号
            font-size: 12px;
            color: #4AA6FC;
            text-align: center;
        }
}
</style>
<style lang='scss'>
.el-popper.is-customized {
    /* Set padding to ensure the height is 32px */
    padding: 6px 12px;
    background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129)) !important;
}

.el-popper.is-customized .el-popper__arrow::before {
    background: linear-gradient(45deg, #b2e68d, #bce689) !important;
    right: 0;
}
</style>